<template>
  <div class="signin">
    <div class="login-head">
      <div class="head-logo"><img src="../assets/logo.png" alt="" /></div>
      <div class="webLogin">欢迎登录</div>
    </div>
    <el-card class="box-card">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          请选择登录身份<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="新人">新人</el-dropdown-item>
          <el-dropdown-item command="主持人">主持人</el-dropdown-item>
          <el-dropdown-item command="婚庆公司">婚庆公司</el-dropdown-item>
          <el-dropdown-item command="策划师">策划师</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="username"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密 码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
      <!-- </div> -->
    </el-card>
    <Footer />
  </div>
</template>

<script>
import api from "../api/";
import jwt from "jwt-decode";
import { mapMutations } from "vuex";
import Footer from "../components/Footer";
export default {
  name: "Login",
  components: {
    Footer,
  },
  data() {
    return {
      role: "",
      ruleForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapMutations("LoginModule", ["setRole", "setUser"]),
    ...mapMutations("isShow", ["setIsShow"]),
    submitForm() {
      api
        .getLogin({
          username: this.ruleForm.username,
          password: this.ruleForm.password,
          role: this.$store.state.LoginModule.role,
        })
        .then((res) => {
          console.log(res.data);
          if (res.status == 200) {
            this.setUser({
              username: jwt(res.data.token).username,
              token: res.data.token,
            });
            this.$message.success(res.data.msg);
            localStorage.setItem("wedding", res.data.token);
            localStorage.setItem("wedding-user", jwt(res.data.token).username);
            localStorage.setItem(
              "wedding-role",
              this.$store.state.LoginModule.role
            );
            /*  这个事是bus源码 给你注释了
            console.log('发送bus');
            this.$bus.$emit("flag",false); 
            */

            //更改仓库值
            this.setIsShow(false);

            this.$router.push("/");
          } else {
            this.$message.error(res.data.errors);
          }
        });
    },
    handleCommand(command) {
      this.setRole(command);
    },
  },
  mounted() {},
};
</script>

<style  scoped lang="less"  >
.login-head {
  background: #fff;
  height: 120px;
  overflow: hidden;
  .head-logo {
    margin-left: 100px;
    float: left;
  }
  .webLogin {
    float: left;
    font-size: 30px;
    font-weight: bold;
    line-height: 120px;
    margin-left: 10px;
    color: #555;
  }
}
.box-card {
  width: 480px;
  margin: 140px auto;
  padding: 60px 50px;
}
</style>